<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }
        .wrep .ps p{
            width: 950px;
            height: 747px;
            border: solid 2px #000;
        }
        .wrep .aa{
            width: 950px;
            height: 100px;
        }
         ul{
            position: fixed;
            right: 0;
            top: 50%;
        }
         ul li{
            width: 80px;
            height: 40px;
            border: solid 3px #ccc;
            text-align: center;
            line-height: 37px;
        }
        .on{
            background-color: aqua;
        }
    </style>

</head>
<body>
    <div class="wrep">
        <div class="ps">
            
        <p>F1</p>
        <p>F2</p>
        <p>F3</p>
        <p>F4</p>
        
        </div>
        <div class="aa"></div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        
    </div>
    
    <script>
        function Big(obj){
            Object.assign(this,obj)
            this.init();
        }
        Big.prototype={
            constructor:Big,

            init:function(){
                this.move();
            },
            move:function(){
                var that=this;
                document.addEventListener('scroll',()=>{
                    var Top=document.documentElement.scrollTop||document.body.scrollTop;
                    [...this.ps.children].forEach((v,i)=>{
                        var aTop=v.offsetTop;
                        if(aTop>=Top){
                            var ons=document.querySelector('.on');
                            ons&&ons.classList.remove('on');
                            [...this.ul.children][i].classList.add('on')
                        }
                    })
                });
                [...this.ul.children].forEach((v,i)=>{
                    v.addEventListener('click',()=>{
                    
                            document.documentElement.scrollTop=[...this.ps.children][i].offsetTop;
                        
                    })
                })
                
            }
            
        }
        new Big({
            wrep:document.querySelector('.wrep'),
            ul:document.querySelector('.wrep ul'),
            ps:document.querySelector('.wrep .ps'),
            lis:document.querySelectorAll('.wrep ul li'),

        })
    </script>
</body>
</html>